<template>
  <!-- 外层div容器 -->
  <div>
    <!-- 表单，@submit.prevent表示提交表单时执行submitForm方法，并阻止默认提交行为 -->
    <form @submit.prevent="submitForm">
      <!-- 表单组，包含美食名称的输入框 -->
      <div class="form-group">
        <!-- 标签，与输入框关联 -->
        <label for="name">美食名称</label>
        <!-- 输入框，v-model双向绑定name变量，class用于样式，required表示该字段为必填 -->
        <input type="text" id="name" v-model="name" class="form-control" required />
      </div>
      <!-- 表单组，包含制作步骤的文本区域 -->
      <div class="form-group">
        <label for="steps">制作步骤</label>
        <textarea id="steps" v-model="steps" class="form-control" required></textarea>
      </div>
      <!-- 表单组，包含所需食材的文本区域 -->
      <div class="form-group">
        <label for="ingredients">所需食材</label>
        <textarea id="ingredients" v-model="ingredients" class="form-control" required></textarea>
      </div>
      <!-- 表单组，包含图片URL的输入框 -->
      <div class="form-group">
        <label for="image">图片URL</label>
        <input type="text" id="image" v-model="image" class="form-control" />
      </div>
      <!-- 提交按钮 -->
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  // 定义组件的状态数据
  data() {
    return {
      name: '', // 美食名称
      steps: '', // 制作步骤
      ingredients: '', // 所需食材
      image: '', // 图片URL
    };
  },
  // 定义组件的方法
  methods: {
    // 表单提交的方法
    submitForm() {
      // 触发父组件的submit事件，并传递表单数据
      this.$emit('submit', {
        id: Date.now(), // 使用当前时间戳作为美食的唯一ID
        name: this.name,
        steps: this.steps,
        ingredients: this.ingredients.split(','), // 将食材字符串分割成数组
        image: this.image,
        comments: [], // 初始化评论为空数组
      });
      // 清空表单字段
      this.name = '';
      this.steps = '';
      this.ingredients = '';
      this.image = '';
    },
  },
};
</script>
